<template>
  <div class="data-processor">
    <h1>数据处理</h1>
    
    <!-- 文件上传区域 -->
    <div class="upload-section">
      <el-upload
        class="upload-demo"
        drag
        multiple
        action="#"
        :auto-upload="false"
        :file-list="fileList"
        @change="handleFileChange"
      >
        <el-icon class="el-icon--upload"><upload-filled /></el-icon>
        <div class="el-upload__text">
          拖拽文件到此处或 <em>点击上传</em>
        </div>
        <template #tip>
          <div class="el-upload__tip">
            支持上传多份数据文件
          </div>
        </template>
      </el-upload>
    </div>
    
    <!-- X6 图配置区域 -->
    <div class="x6-config-section">
      <h2>数据节点配置</h2>
      <div ref="x6Container" class="x6-container"></div>
    </div>
    
    <!-- 处理逻辑和参数配置 -->
    <div class="process-config-section">
      <h2>处理逻辑和参数</h2>
      <el-form :model="processConfig" label-width="120px">
        <el-form-item label="处理类型">
          <el-select v-model="processConfig.type" placeholder="请选择处理类型">
            <el-option label="数据清洗" value="clean"></el-option>
            <el-option label="数据转换" value="transform"></el-option>
            <el-option label="数据合并" value="merge"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="参数配置">
          <el-input
            v-model="processConfig.parameters"
            type="textarea"
            placeholder="请输入处理参数"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="processData">开始处理</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, nextTick } from 'vue'
import { UploadFilled } from '@element-plus/icons-vue'
import { Graph, Node, Edge } from '@antv/x6'

// 文件列表
const fileList = ref([])

// 处理配置
const processConfig = ref({
  type: '',
  parameters: ''
})

// X6 图实例
const graph = ref(null)
const x6Container = ref(null)

// 处理文件上传
const handleFileChange = (file, fileList) => {
  console.log('文件列表:', fileList)
}

// 初始化 X6 图
const initX6Graph = () => {
  if (!x6Container.value) return
  
  graph.value = new Graph({
    container: x6Container.value,
    width: 800,
    height: 600,
    grid: true,
    mousewheel: {
      enabled: true,
      zoomAtMousePosition: true,
    },
    connecting: {
      router: 'manhattan',
      connector: {
        name: 'rounded',
        args: {
          radius: 8,
        },
      },
      anchor: 'center',
      connectionPoint: 'anchor',
      allowBlank: false,
      highlight: true,
      snap: true,
      createEdge() {
        return new Edge({
          attrs: {
            line: {
              stroke: '#a0a0a0',
              strokeWidth: 1,
              targetMarker: {
                name: 'classic',
                size: 7,
              },
            },
          },
        })
      },
    },
    highlighting: {
      connectionTarget: {
        name: 'stroke',
        args: {
          attrs: {
            fill: '#7c68fc',
          },
        },
      },
    },
    resizing: true,
    rotating: true,
    selecting: {
      enabled: true,
      rubberband: true,
      showNodeSelectionBox: true,
    },
    snapline: true,
    keyboard: true,
    clipboard: true,
  })
  
  // 添加一些示例节点
  const source = graph.value.addNode({
    x: 100,
    y: 100,
    width: 80,
    height: 40,
    label: '数据源',
    attrs: {
      body: {
        stroke: '#8f8f8f',
        strokeWidth: 1,
        fill: '#fff',
        rx: 6,
        ry: 6,
      },
    },
  })
  
  const target = graph.value.addNode({
    x: 300,
    y: 150,
    width: 80,
    height: 40,
    label: '处理节点',
    attrs: {
      body: {
        stroke: '#8f8f8f',
        strokeWidth: 1,
        fill: '#fff',
        rx: 6,
        ry: 6,
      },
    },
  })
}

// 处理数据
const processData = () => {
  console.log('处理配置:', processConfig.value)
  // 这里实现实际的数据处理逻辑
}

// 组件挂载后初始化 X6 图
onMounted(() => {
  nextTick(() => {
    initX6Graph()
  })
})
</script>

<style scoped>
.data-processor {
  padding: 20px;
  width: 1200px;
  margin: 0 auto;
  padding-top: 80px;
}

.upload-section {
  margin-bottom: 30px;
}

.x6-config-section {
  margin-bottom: 30px;
}

.x6-container {
  width: 100%;
  height: 600px;
  border: 1px solid #e0e0e0;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.process-config-section {
  margin-bottom: 30px;
}
</style>